<template>
  <div class="songTop">
    <div class="header">
      <img :src="dataInfoList.coverImgUrl" alt="" class="img" />
      <van-sticky offset-top="0rem">
        <div class="title">
          <svg class="icon iconLeft" aria-hidden="true" @click="router.go(-1)">
            <use xlink:href="#icon-zuojiantou"></use>
          </svg>
          <span class="textCenter">歌单</span>
          <svg class="icon iconCenter" aria-hidden="true">
            <use xlink:href="#icon-sousuo"></use>
          </svg>
          <svg class="icon iconRight" aria-hidden="true">
            <use xlink:href="#icon-31liebiao"></use>
          </svg>
        </div>
      </van-sticky>
      <div class="content">
        <div class="left">
          <img :src="dataInfoList.coverImgUrl" alt="" class="CImg" />
        </div>
        <div class="right">
          <p class="topP">{{ dataInfoList.name }}</p>
          <div class="rightImg">
            <img :src="dataInfoList.creator.backgroundUrl" alt="" class="RImg" />
            <span>{{ dataInfoList.creator.nickname }}</span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiangyoujiantou"></use>
            </svg>
          </div>
          <p class="buP">
            <span class="buP_item">{{ dataInfoList.description }}</span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xiangyoujiantou"></use>
            </svg>
          </p>
        </div>
      </div>
      <div class="footer">
        <div class="iconItem">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-31xiaoxi"></use>
          </svg>
          <span>{{ dataInfoList.commentCount }}</span>
        </div>
        <div class="iconItem">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-fenxiang"></use>
          </svg>
          <span>{{ dataInfoList.shareCount }}</span>
        </div>
        <div class="iconItem">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-xiazai-wenjianxiazai-07"></use>
          </svg>
          <span>下载</span>
        </div>
        <div class="iconItem">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-duoxuan"></use>
          </svg>
          <span>多选</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'

const router = useRouter()
const props = withDefaults(
  defineProps<{
    dataInfoList: any
  }>(),
  {}
)

// const cssImg = computed(() => {
//   return {
//     '--title-background:': `url(${props.dataInfoList.coverImgUrl})`
//   }
// })
// console.log(cssImg)
</script>

<style scoped lang="less">
.songTop {
  .header {
    height: 5.5rem;
    position: relative;
    .img {
      width: 100%;
      height: 5.5rem;
      position: fixed;
      filter: blur(120px);
      z-index: -1;
    }
    .title {
      display: flex;
      height: 0.75rem;
      justify-content: space-between;
      align-items: center;
      padding: 0.2rem;
      position: relative;
      background-color: #fff;
      border: 1px solid #fff;
      border-top: none;
      box-sizing: border-box;
      border-bottom-left-radius: 0.2rem;
      border-bottom-right-radius: 0.2rem;

      .textCenter {
        position: absolute;
        left: 1rem;
        font-size: 0.4rem;
      }
      .iconCenter {
        position: absolute;
        right: 1rem;
      }
    }
    .content {
      display: flex;
      width: 100%;
      height: 3.4rem;
      padding: 0.4rem 0.2rem 0 0.2rem;
      .left {
        flex: 3;
        .CImg {
          width: 100%;
          height: 100%;
          border: 1px solid transparent;
          border-radius: 0.2rem;
        }
      }
      .right {
        flex: 4;
        display: flex;
        flex-direction: column;
        align-content: space-between;
        justify-items: center;
        margin-left: 0.2rem;
        .icon {
          width: 0.3rem;
          height: 0.3rem;
        }
        .topP {
          flex: 1;
        }
        .buP {
          flex: 1;
          line-height: 0.5rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .rightImg {
          flex: 1;
          display: flex;
          align-items: center;
          width: 100%;
          .RImg {
            width: 0.5rem;
            height: 0.5rem;
            border: 1px solid transparent;
            border-radius: 0.25rem;
          }
        }
      }
    }
    .footer {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 0.25rem;
      .iconItem {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon {
          width: 0.5rem;
          height: 0.5rem;
        }
      }
    }
  }
}
</style>
